<template>
	<view class="chat-list-page">
		<!-- 角色切换 -->
		<view class="role-switch">
			<view class="role-item" :class="{active: currentRole === 'user'}" @click="changeRole('user')">
				用户列表
			</view>
			<view class="role-item" :class="{active: currentRole === 'seller'}" @click="changeRole('seller')">
				卖家列表
			</view>
		</view>

		<!-- 列表内容 -->
		<scroll-view scroll-y class="list-container">
			<view v-for="(item, index) in currentList" :key="index" class="list-item">
				<image class="avatar" :src="_imgUrl +item.avatar" mode="aspectFill"></image>

				<view class="info-section">
					<text class="name">{{item.nickName}}</text>
					<text class="tag">{{item.roleId == 102?'买家':'卖家'}}</text>
				</view>

				<view class="chat-btn" @click="startChat(item)">
					<text>开始对话</text>
					<view class="cuIcon-message"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentRole: 'user', // user/seller
				userList: [
					// {
					// 	id: 1,
					// 	name: '用户小王',
					// 	avatar: '/static/avatars/user1.jpg',
					// 	lastActive: '3分钟前'
					// },
					// {
					// 	id: 2,
					// 	name: '消费者小李',
					// 	avatar: '/static/avatars/user2.jpg',
					// 	lastActive: '1小时前'
					// }
				],
				sellerList: [
					// {
					// 	id: 3,
					// 	name: '张老板',
					// 	shop: '有机农场',
					// 	avatar: '/static/avatars/seller1.jpg',
					// 	rate: 4.9
					// },
					// {
					// 	id: 4,
					// 	name: '李掌柜',
					// 	shop: '绿色果蔬园',
					// 	avatar: '/static/avatars/seller2.jpg',
					// 	rate: 4.8
					// }
				],
				roleList: [],
				_imgUrl: ''
			}
		},
		onLoad() {
			this._imgUrl = this.$base.url
			Promise.all([this.getuserList(), this.getroleList()])
		},
		computed: {
			currentList() {
				// return this.currentRole === 'user' ? this.userList : this.sellerList
				return this.userList
			}
		},
		methods: {
			changeRole(role) {
				this.currentRole = role
				this.getuserList()
			},
			async startChat(item) {
				try {
					let res = await this.$api.list('chat', {
						nhId: uni.getStorageSync('userInfo').userId,
						otherId: item.userId,
						otherName: item.userName,
						otherPhoto: item.avatar
					})
					if (res.code == 200) {
						if (res.rows.length > 0) {
							uni.navigateTo({
								url: `/pages/chat/chat?id=${item.id}&role=${this.currentRole}`
							})
						} else {
							const params = {
								nhId: uni.getStorageSync('userInfo').userId,
								otherId: item.userId,
								nhName: uni.getStorageSync('userInfo').userName,
								otherName: item.userName,
								nhPhoto: uni.getStorageSync('userInfo').avatar,
								otherPhoto: item.avatar,
								backup: item.role

							}
							Promise.all([this.addchat(params)]).then(() => {
								// uni.navigateTo({
								// 	url: `/pages/chat/chat?id=${this.chatId}&role=${this.currentRole}`
								// })
								uni.switchTab({
									url: `/pages/chatList/chatList?id=${this.chatId}&role=${this.currentRole}`
								})
							})
						}
					}

				} catch (error) {
					//TODO handle the exception
				}

			},
			async addchat(params) {
				try {
					let res = await this.$api.add('chat', params)
					if (res.code == 200) {
						// this.userList = rows
					}

				} catch (error) {
					//TODO handle the exception
				}
			},
			async getuserList() {
				// , {
				// 	roleId: this.currentRole === 'user' ? 100 : 101
				// },

				try {
					let res = await this.$api.list1('user')

					if (res.code == 200) {
						this.userList = res.rows.filter((item) => {
							return this.currentRole == 'user' ? item.roleId == 102 : item.roleId == 101
						})
					}
					console.log(this.userList, this.currentRole);
				} catch (error) {
					//TODO handle the exception
				}
			},
			async getroleList() {
				try {
					let res = await this.$api.list('role')
					if (res.code == 200) {
						this.roleList = res.rows
					}

				} catch (error) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-list-page {
		background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
		min-height: 100vh;
	}

	.role-switch {
		display: flex;
		margin: 40rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 48rpx;
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);

		.role-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			color: #718096;
			transition: all 0.3s;

			&.active {
				background: linear-gradient(135deg, #667eea, #764ba2);
				color: white;
				border-radius: 48rpx;
				box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
			}
		}
	}

	.list-container {
		height: calc(100vh - 200rpx);
		padding: 0 32rpx;
	}

	.list-item {
		background: rgba(255, 255, 255, 0.95);
		padding: 24rpx;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);

		.avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}

		.info-section {
			flex: 1;

			.name {
				font-size: 32rpx;
				color: #2d3748;
				font-weight: 500;
			}

			.tag {
				display: block;
				font-size: 24rpx;
				color: #00aa00;
				margin-top: 8rpx;
			}
		}

		.chat-btn {
			background: rgba(102, 126, 234, 0.1);
			padding: 12rpx 24rpx;
			border-radius: 48rpx;
			display: flex;
			align-items: center;
			color: #667eea;
			transition: all 0.3s;

			&:active {
				transform: scale(0.95);
			}

			text {
				margin-right: 12rpx;
			}

			.cuIcon-message {
				font-size: 36rpx;
			}
		}
	}
</style>